<template>
	<!-- 用户信息 -->
	<view>
		<navBar :text="'个人信息'"></navBar>

		<view class="avatar">
			<u-avatar size="large" :src="userInfo.user_img"></u-avatar>
		</view>

		<view style="padding-bottom: 30rpx;">
			<view class="choose">
				<text>点击选择你喜欢的头像</text>
				<text style="font-size: 23rpx;">(可以左右滑动)</text>
			</view>
			<scroll-view scroll-x>
				<view class="tops">
					<view v-for="(item,index) in imgList" :key='item.head_id' class="tops-item">
						<image :class="imgChecked === item.head_id ? 'active' : ''" :src="item.head_img" mode=""
							@click="changeAvatar(item.head_id,item.head_img)"></image>
					</view>
				</view>
			</scroll-view>
		</view>


		<view class="setting">
			<u-form :model="userInfo" ref="uForm" label-width="130rpx">
				<u-form-item label="昵称" prop="name">
					<input type="text" maxlength="10" :value="userInfo.user_name" @focus="del(1)"
						@blur="add(1,$event)" />
				</u-form-item>
				<u-form-item label="用户ID">
					<u-input v-model="userInfo.user_id" :disabled="true" @click="showToast" />
				</u-form-item>
				<u-form-item label="账号">
					<u-input v-model="userInfo.name" :disabled="true" @click="showToast" />
				</u-form-item>
				<u-form-item label="性别">
					<u-input v-model="userInfo.user_sex" type="select" @click="isshow = true" />
				</u-form-item>
				<u-form-item label="年龄">
					<input type="text" maxlength="3" :value="userInfo.user_age" @focus="del(2)" @blur="add(2,$event)" />
				</u-form-item>
				<u-form-item label="邮箱">
					<u-input v-model="userInfo.qq_email" :disabled="true" @click="showToast" />
				</u-form-item>
			</u-form>
			<u-select v-model="isshow" :list="sexList" @confirm="confirm"></u-select>
		</view>

		<view class="btn">
			<u-button type="primary" @click="changeUser">修改信息</u-button>
		</view>

		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		getUserImg,
		changeUserInfo
	} from '../../utils/user.js'
	export default {
		data() {
			return {
				imgChecked: '0',
				imgList: [],
				//用户信息
				userInfo: {},
				//用户信息内容各保存一份
				intro: '',
				name: '',
				qq_email: '',
				user_age: '',
				user_id: '',
				user_img: '',
				user_name: '',
				user_sex: '',
				//控制性别选择的显示
				isshow: false,
				//性别的选择
				sexList: [{
						value: '男',
						label: '男'
					},
					{
						value: '女',
						label: '女'
					},
				],

				rules: {
					name: [
						// 对用户名字段进行长度验证
						{
							min: 4,
							message: '用户名不能少于4个字',
							trigger: ['change', 'blur']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字!',
							trigger: ['change', 'blur']
						},
						// 对密码字段进行必填验证
						{
							required: true,
							message: '请填写用户名',
							trigger: ['change', 'blur']
						},
					],
					intro: [
						// 对用户名字段进行长度验证
						{
							min: 4,
							message: '用户名不能少于4个字',
							trigger: ['change', 'blur']
						},
						// 正则判断为字母或数字
						{
							pattern: /^[0-9a-zA-Z]*$/g,
							// 正则检验前先将值转为字符串
							transform(value) {
								return String(value);
							},
							message: '只能包含字母或数字!',
							trigger: ['change', 'blur']
						},
						// 对密码字段进行必填验证
						{
							required: true,
							message: '请填写用户名',
							trigger: ['change', 'blur']
						},
					]
				}
			};
		},
		methods: {
			//选择头像
			changeAvatar(id, img) {
				this.imgChecked = id
				this.userInfo.user_img = img
			},
			//获取头像列表
			async getImg() {
				let result = await getUserImg()
				if (result.code === 200) {
					this.imgList = result.data
				}
			},
			//提示用户不能修改
			showToast() {
				this.$refs.uToast.show({
					title: '暂不支持修改',
					type: 'warning',
					duration: 500
				})
			},
			//获取焦点的方法
			del(num) {
				if (num === 1) {
					this.userInfo.user_name = ''
				} else if (num === 2) {
					this.userInfo.user_age = ''
				} else {
					this.userInfo.intro = ''
				}
			},
			//失去焦点的方法
			add(num, e) {
				if (e.target.value === '') {
					if (num === 1) {
						this.userInfo.user_name = this.user_name
					} else if (num === 2) {
						this.userInfo.user_age = this.user_age
					} else {
						this.userInfo.intro = this.intro
					}
				} else {
					if (num === 1) {
						this.userInfo.user_name = e.target.value
					} else if (num === 2) {
						this.userInfo.user_age = e.target.value
					} else {
						this.userInfo.intro = e.target.value
					}
				}
			},
			//修改性别
			confirm(value) {
				this.userInfo.user_sex = value[0].value
			},
			//修改用户信息
			async changeUser() {
				let data = {
					user_id: this.userInfo.user_id,
					user_name: this.userInfo.user_name,
					user_img: this.userInfo.user_img,
					user_sex: this.userInfo.user_sex,
					user_age: this.userInfo.user_age,
					intro: this.userInfo.intro
				}
				let result = await changeUserInfo(data)
				if (result.code === 200) {
					uni.removeStorageSync('userInfo')
					uni.setStorageSync('userInfo', result.data3)
					this.$refs.uToast.show({
						title: '修改成功',
						type: 'success',
						isTab: true,
						url: '/pages/center/center',
						duration: 1000
					})
				} else if (result.code === 505) {
					this.$refs.uToast.show({
						title: '昵称不能小于4个字！',
						type: 'error',
						duration: 1000
					})
				} else if (result.code === 515) {
					this.$refs.uToast.show({
						title: '您的账号已被封禁，请联系管理员',
						type: 'error',
						duration: 1000
					})
				} else {
					this.$refs.uToast.show({
						title: '修改失败',
						type: 'error',
						duration: 1000
					})
				}
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onShow() {
			let userinfo = uni.getStorageSync('userInfo')
			this.getImg()
			this.userInfo = userinfo
			this.intro = userinfo.intro
			this.name = userinfo.name
			this.user_age = userinfo.user_age
			this.user_id = userinfo.user_id
			this.user_img = userinfo.user_img
			this.user_sex = userinfo.user_sex
			this.user_name = userinfo.user_name
		}
	}
</script>

<style lang="scss" scoped>
	.avatar {
		display: flex;
		justify-content: center;
		padding: 70rpx 0;
	}

	.setting {
		width: 90%;
		margin: 0 auto;
	}

	.btn {
		width: 40%;
		margin: 0 auto;
		padding: 75rpx;
	}

	.choose {
		width: 67%;
		margin: 0 auto;
		padding-bottom: 30rpx;
		color: #2979FF;
		font-weight: bold;
		font-size: 28rpx;
	}

	.tops {
		width: 100%;
		display: flex;
		margin: 0 auto;


		.tops-item {

			padding: 0 37rpx;

			image {
				border-radius: 50%;
				border: 4px solid white;
				width: 90rpx;
				height: 90rpx;


				&.active {
					border-color: #2979FF;
				}
			}
		}

		// view{
		// 	margin: 0 10rpx;
		// }
	}
</style>
